<template>
	<el-container>
		<el-header class="header">
			<b>房间禁止发送任何联系方式</b>
		</el-header>
		<el-container>
			<el-aside width="33%">
				<div style="height:400px">
					播放器
				</div>
				<div class="giftTab">
					<b>热门</b>
					<b>豪华</b>
					<b>金币</b>
					<el-button type="warning" icon="el-icon-search" size="mini"
						>排麦</el-button
					>
				</div>
				<div class="giftView">
					<Gift v-for="item in 30" :key="item">
						{{ item }}
					</Gift>
				</div>
				<div class="giftinputview">
					<el-select v-model="value" placeholder="请选择">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
					<el-input placeholder="礼物接收人"></el-input>
					<el-button size="mini" type="danger">赠送</el-button>
					<el-button size="mini" type="primary">赠送</el-button>
				</div>
			</el-aside>
			<el-aside width="50%" style="overflow:hidden">
				<div class="messages" style="height:50%">
					<msg v-for="item in 10" :key="item" />
				</div>
				<div class="messages" style="height:50%">
					<msg v-for="item in 10" :key="item" />
				</div>
			</el-aside>
			<el-main style=" padding:0">
				<el-tabs type="border-card" style="margin:0">
					<el-tab-pane label="用户(86)">
						<div class="userList">
							<User v-for="item in 10" :key="item"></User>
						</div>
					</el-tab-pane>
					<el-tab-pane label="主播">主播</el-tab-pane>
				</el-tabs>
				<div class="sysMsg" style="padding:10px;font-size:8px">
					<el-button type="warning" icon="el-icon-search" size="mini"
						>系统公告</el-button
					>
					<SysMsg></SysMsg>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import Gift from '../components/Gift.vue';
import msg from '../components/msg.vue';
import User from '../components/User.vue';
import SysMsg from '../components/SysMsg.vue';
export default {
	components: {
		Gift,
		msg,
		User,
		SysMsg,
	},
	data() {
		return {
			options: [
				{
					value: '选项1',
					label: '黄金糕',
				},
				{
					value: '选项2',
					label: '双皮奶',
				},
			],
			value: '',
		};
	},
};
</script>

<style lang="scss" scoped>
.header {
	background-color: #abd8fb;
	height: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
}

.giftTab {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px;
}

.giftView {
	display: flex;
	height: 200px;
	overflow: scroll;
	justify-content: space-around;
	flex-wrap: wrap;
}

.giftinputview {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.messages {
	border: solid #82b1d8 6px;
	padding: 10px;
}
.userList {
	min-height: 400px;
}
</style>
